<script setup lang="ts">
  import { ref } from 'vue';
  /*
   * @description 父组件传递的props属性
   * */
  const {
    selectOptions = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
    ],
    valueKey = 'value',
    labelKey = 'label',
    multiple = false,
    placeholder = '请选择',
    size = 'default',
    disabled = false,
  } = defineProps<{
    selectOptions: { [key: string]: string }[];
    valueKey?: string;
    labelKey?: string;
    multiple?: boolean;
    placeholder?: string;
    size?: 'default' | 'small' | 'large';
    disabled?: boolean;
  }>();

  const value = ref<string | number | Array<string | number>>(multiple ? [] : '');
</script>

<template>
  <div>
    <el-select
      v-model="value"
      :multiple="multiple"
      :placeholder="placeholder"
      :size="size"
      :disabled="disabled"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item[valueKey]"
        :label="item[labelKey]"
        :value="item[valueKey]"
      ></el-option>
    </el-select>
  </div>
</template>

<style scoped lang="scss"></style>
